@import "../config/var";

/*
  @include b(button){
    color: red;
  }

  ↓

  .v3-ui-button{
    color: red;
  }
*/
@mixin b($block){
  $B: $namespace + '-' + $block;
  .#{$B} {
    @content;
  }
}

/*
  @include when(disabled){
    color: red;
  }

  ↓

  &.is-disabled{
    color: red;
  } //← 并且不会嵌套在父级中 而是在css的根层级中
*/
@mixin when($state){
  @at-root {
    &.#{$state-prefix + $state} {
      @content;
    }
  }
}

/*
   @include m(primary){
    color: red;
  }

  ↓

  .v3-ui-button--primary{
    color: red;
  } //← 并且不会嵌套在父级中 而是在css的根层级中
*/
@mixin m($modifier){
  @at-root {
    #{& + $modifier-separator + $modifier} {
      @content;
    }
  }
}


/*
  @include m(header){
    color: red;
  }

  ↓

  .v3-ui-layout__header{
    color: red;
  } //← 并且不会嵌套在父级中 而是在css的根层级中
*/
@mixin e($element) {
  @at-root {
    #{& + $element-separator + $element} {
      @content;
    }
  }
}
